<template>
  <div v-if="!repoUrl">loading</div>
  <div v-else>most star repo is <a :href="repoUrl">{{repoName}}</a></div>
</template>

<!--
绑定事件监听 --订阅消息
触发事件 --发布消息
-->
<script>
  import axios from 'axios'

 export default {
   data () {
     return {
       repoUrl: '',
       repoName: ''
     }
   },

   mounted () {
     //获取github以v开头star最多的项目
     const url = 'https://api.github.com/search/repositories?q=v&sort=stars'
     // 使用vue-resouce发ajax请求获取数据
     /*this.$http.get(url).then(
       response => { //成功回调
         // 成功得到结果
         const result = response.data
         // 得到最受欢迎的repo
         const mostRepo = result.items[0]
         this.repoUrl = mostRepo.html_url
         this.repoName = mostRepo.name
       },

       response => { // 错误回调
          alert('请求失败')
       }
     )*/

     //使用axios发送ajax请求
     axios.get(url).then(response => { //成功回调
         // 成功得到结果
         const result = response.data
         // 得到最受欢迎的repo
         const mostRepo = result.items[0]
         this.repoUrl = mostRepo.html_url
         this.repoName = mostRepo.name
       }).catch(error => {// 错误回调
          alert('请求失败')
     })

   }

 }
</script>

<style>

</style>
